<template>
	<div>
		<div id="first">
			<p class="titleName">{{Title[0]["name"]}}</p>
			<ul>
				<li class="intro" v-for="(item,index) in First">
					<div class="container">
						<img :src="item['src']">
						<p class="title">{{item.title}}</p>
						<p class="text">{{item.text.split(";")[0]}}</p>
						<p class="text">{{item.text.split(";")[1]}}</p>
						<p class="text">{{item.text.split(";")[2]}}</p>
					</div>
				</li>
			</ul>
		</div>
		<div id="second">
			<p class="titleName">{{Title[1]["name"]}}</p>
			<ul>
				<li v-for="(item,index) in Second" >
					<router-link :to="item.to" class="industryPrograms" tag="a">
						<img :src="item['src']">
					</router-link>
				</li>
			</ul>
		</div>
		<div id="third">
			<p class="titleName">{{Title[2]["name"]}}</p>
			<div class="box" v-for="(item,index) in Third">
				<img :src="item.src" alt="">
				<div>
					<p class="msg">{{item.title}}</p>
					<p class="msg">{{item.text}}</p>
					<div class="detail">
						<router-link :to="{name:'news',params:{id:index}}" tag="span">
							详细信息&nbsp;&nbsp;>>
						</router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default({
		data () {
			return {
				Title: [
					{name: "吸引客流，减少成本"},
					{name: "行业方案"},
					{name: "新 闻"}
				],
				First: [
					{
						src: require("../assets/cloudControl.png"),
						title: "云端控制",
						text: "连锁总部直控;缩减环节"
					},
					{
						src: require("../assets/multimediaDisplay.png"),
						title: "多媒体展示",
						text: "增加节目信息量;提高客户观看兴趣"
					},
					{
						src: require("../assets/multiscreenLinkage.png"),
						title: "多屏联动",
						text: "提升视觉感觉;吸引更多关注"
					},
					{
						src: require("../assets/gameInteraction.png"),
						title: "游戏互动",
						text: "黏性互动;导入更多客流;AR迎宾，省却人力"
					},
					{
						src: require("../assets/smartShop.png"),
						title: "智慧店铺",
						text: "AI人脸识别;客流统计、精准投放"
					},
					{
						src: require("../assets/caringService.png"),
						title: "贴心服务",
						text: "预置模板;节目代发、广告设计"
					},
					{
						src: require("../assets/industryBreakdown.png"),
						title: "行业细分",
						text: "精准把握行业需求;提供整体解决方案"
					}
				],
				Second: [
					{
						src: require("../assets/caseCinema.png"),
						to: "/cinema"
					},
					{
						src: require("../assets/caseCatering.png"),
						to: "/catering"
					},
					{
						src: require("../assets/caseSuper.png"),
						to: "/super"
					}
				],
				Third: [
					{
						src: require("../assets/guangzhoudisplay.jpg"),
						title: "北影云步参加第三十六届广州特许加盟展",
						text: "针对餐饮行业的数字标牌解决方案广受欢迎"
					},
					{
						src: require("../assets/fastfish.jpg"),
						title: "快鱼连锁采用北影云步的解决方案",
						text: "总部管理，一部到位"
					},
					{
						src: require("../assets/cinema.jpg"),
						title: "为幸福蓝海影院提供整体解决方案",
						text: "从联屏到单屏一体机"
					}
				]
			}
		}
	})
</script>

<style scoped>
	.titleName {
		color:#348ecd;
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30px;
	}
	ul {
		overflow: hidden;
		display: block;
		margin: 0 auto;
		color:#555;
	}
	li {
		list-style: none;
		float: left;
	}
	#first ul {
		width: 1225px;
	}
	#second ul {
		width: 1000px;
	}
	li.intro {
		width:135px;
		margin:10px 20px;
	}
	#second li {
		margin:10px 15px;
	}
	.title {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: #555;
		margin: 20px 0;
	}
	.text {
		text-align: center;
		margin-top: 8px;
		font-size: 13px;
	}
	img {
		display: block;
		margin: 0 auto;
	}
	#first, #second, #third {
		padding: 40px 0;
	}
	#second {
		background: #f7f7f7;
	}
	#third img{
		width: 300px;
		height: 200px;
	}
	.box {
		width: 1000px;
		margin: 0 auto;
		margin-top: 30px;
		background: #f5f5f5;
		overflow: hidden;
	}
	.box img {
		float: left;
	}
	.box div {
		float: left;
		margin: 20px;
		font-size: 16px;
	}
	.box div>p:first-child {
		font-size: 22px;
		margin-bottom: 10px;
	}
	.detail {
		text-align: center;
		height: 40px;
		margin-top: 60px !important;
		margin-left: 0 !important;
		margin-bottom: 0 !important;
	}
	.detail>span {
		width: 106px;
		height: 24px;
		display: inline-block;
		border: 1px solid #328ecd;
		color:#328ecd;
		border-radius: 4px;
		font-family: "微软雅黑";
		font-size: 14px;
		padding-top: 4px;
		cursor: pointer;
		clear: both;
	}
	.box .msg {
		color: #555;
	}
</style>